<template>
  <div class="create-order">
    <Header title="生成订单"/>

    <!-- 联系人 -->
    <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
    <div class="content">
        <div v-for="(item,index) in store.state.orderList" :key="index">
        <van-card
          :num="item.num"
          :price="item.price"
          :title="item.title"
          :thumb="item.pic"
    />

        </div>
    </div>
    <div class="pay-wrap">
        <div class="price">
            <span>商品金额</span>
            <span>￥{{ totalPrice }}</span>
        </div>
        <van-button type="primary" class="pay-btn"
         block color="#ffc400"
         @click="handleCreateOrder">生成订单</van-button>
    </div>
  </div>
</template>

<script>
import { reactive,toRefs,onMounted } from 'vue'
import Header from '../../components/Header.vue'
import { useStore } from 'vuex'
import { Dialog } from 'vant';
import { useRouter,useRoute } from 'vue-router';

export default {
    components:{ Header },
    setup(){
        const store  = useStore()
        const router = useRouter()
        const route  = useRoute()

        //联系人:
        const data = reactive({
            tel:'1344381090',
            name:'zcy',
            totalPrice:0 //总价
        })
        // console.log(store.state.orderList);

        //计算合计金额：
        const initPrice = ()=>{
            let price = 0
            if(store.state.orderList.length){
               store.state.orderList.forEach((item)=>{
                  price += item.num * item.price
               })
            }
            data.totalPrice = price
        }

        //初始化收货地址：
        const initUser = ()=>{
            store.state.userAddress.forEach(item=>{
                if(item.isDefault){
                    data.name = item.name
                    data.tel = item.tel
                }
            })
        }

        //handleCreateOrder: 订单完成
        const handleCreateOrder = ()=>{
            // Dialog({ message: '生成订单成功' }); 
            Dialog({
                title: '提示',
                message: '生成订单成功',
            }).then(() => {
                // 跳转到订单页：需要和购物车联系起来
                // filter: 过滤器
                // 作用: 用于对数组进行过滤, 
                // 它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
                let newList = store.state.cartList.filter(item=>{
                    return !route.query.list.includes(item.id + "")//item.id + ""拼接成字符串
                    // includes()方法：
                    // 用于判断字符串是否包含指定的子字符串。
                    // 如果找到匹配的字符串则返回 true，否则返回 false。
                })
                store.commit('delete',newList)
                store.commit('orderListEnd')
                router.push('/order')
            });

        }

        // 挂载，调用，类似于computed
        onMounted(()=>{ 
            initPrice()
            initUser()
         })

        //onEdit : 跳转到地址页面
        const onEdit = ()=>{
          router.push("/address")
        }

        return {
            ...toRefs(data), onEdit, store, route, handleCreateOrder
        }
    }
}
</script>

<style lang="less" scoped>
.create-order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .pay-wrap {
    padding: 10px 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e9e9e9;
    > div {
      display: flex;
      justify-content: space-between;
      padding: 0 5%;
      margin: 10px 0;
      font-size: 14px;
      span:nth-child(2) {
        color: red;
        font-size: 18px;
      }
    }
    .pay-btn {
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>